window.onload = function() {
  var oMain = document.getElementById("main");

  $("#main").height($(window).height());
  $("#main").width($(window).width());

  $(window).resize(function() {
    $("#main").height($(window).height());
    $("#main").width($(window).width());
  });

  var oDiv = document.getElementById("div_money");
  var arr = [0.89, 1.12, 2.23, 3.34, 4.45, 5.56, 6.67, 7.78, 8.89, 9.90,
    10.98, 11.21, 12.32, 2.53, 3.54, 4.62, 5.76, 7.87, 6.98, 9.09
  ];

  function consumeMoney() {
    //随机取数据
    var ran = Math.floor(Math.random() * 20);

    oDiv.innerHTML = '￥' + (parseFloat(oDiv.innerHTML.substr(1)) + arr[ran]).toFixed(2) + '';

    var oWater = document.getElementById("div_water");
    var oMoney = document.getElementById("div_money");
    oWater.style.left = parseInt(getStyle(oWater, 'left')) - 1 + 'px';
    oWater.style.width = parseInt(getStyle(oWater, 'width')) + 1 + 'px';
    oMoney.style.left = parseInt(getStyle(oMoney, 'left')) - 1 + 'px';

    if (parseInt(getStyle(oMoney, 'left')) <= 0) {
      oMoney.style.left = '0px';
    };
  }
  var frequency = 2000;
  var timer = setInterval(consumeMoney, frequency);


  document.onkeydown = function(e) {
    var ev = e || event;
    //按下空格键清空数据
    if (ev.keyCode == 32) {
      // clearData();
      var oWater = document.getElementById("div_water");
      var oMoney = document.getElementById("div_money");

      //背景色
      animBackground();
      //money数值变化
      animMoney();
      //水槽
      // var wLeft = parseInt($(window).width() * 0.45);
      // startMove(oWater, {
      //   width: 0,
      //   left: wLeft
      // }, function() {
      //   timer = setInterval(consumeMoney, frequency);
      // });
      var wLeft = parseInt($(window).width() * 0.45);
      startMove(oWater, {
        width: 0
      }, function() {
        timer = setInterval(consumeMoney, frequency);
      });
      startMove(oWater, {
        left: wLeft
      });
      //money移动
      startMove(oMoney, {
        left: wLeft
      });

    }

  };

  //清空数据
  function clearData() {
      oDiv.innerHTML = '￥0.00';
      clearInterval(timer);
    }
    //money数值减小动画
  function animMoney() {
    clearInterval(timer);
    var dm = parseFloat(oDiv.innerHTML.substr(1)) / 18;
    var mTimer = setInterval(function() {
      oDiv.innerHTML = '￥' + (parseFloat(oDiv.innerHTML.substr(1)) - dm).toFixed(2) + '';
      if (parseFloat(oDiv.innerHTML.substr(1)) <= 0.00) {
        oDiv.innerHTML = '￥0.00';
        clearInterval(mTimer);

        setTimeout(function() {
          var oCover = document.getElementById("blink_cover");
          oCover.style.display = 'block';
          animToBlack(oCover, function() {
            animToWhite(oCover, function() {
              oCover.style.display = 'none';

            });
          });
        }, 300);
      };

    }, 30);
  }

  //背景色由黑变白
  function animToWhite(obj, fnEnd) {
      obj.style.backgroundColor = '#000';
      var r = 0x00;
      var g = 0x00;
      var b = 0x00;

      var tR = 0xff;
      var tG = 0xff;
      var tB = 0xff;
      var f = 15;
      var dR = (tR - r) / f;
      var dG = (tG - g) / f;
      var dB = (tB - b) / f;

      var colorTimer = setInterval(function() {
        r += dR;
        g += dG;
        b += dB;

        var bgR = parseInt(r).toString(16);
        var bgG = parseInt(g).toString(16);
        var bgB = parseInt(b).toString(16);

        obj.style.backgroundColor = '#' + bgR + bgG + bgB; // HEX -> HEXString
        if (r == tR) {
          clearInterval(colorTimer);
          if (fnEnd) {
            fnEnd();
          }
        };

      }, 30);
    }
    //背景色由白变黑
  function animToBlack(obj, fnEnd) {
      var r = 0xff;
      var g = 0xff;
      var b = 0xff;

      var tR = 0x00;
      var tG = 0x00;
      var tB = 0x00;
      var f = 15;
      var dR = (tR - r) / f;
      var dG = (tG - g) / f;
      var dB = (tB - b) / f;

      var colorTimer = setInterval(function() {
        r += dR;
        g += dG;
        b += dB;

        var bgR = parseInt(r).toString(16);
        var bgG = parseInt(g).toString(16);
        var bgB = parseInt(b).toString(16);

        obj.style.backgroundColor = '#' + bgR + bgG + bgB; // HEX -> HEXString
        if (r == tR) {
          clearInterval(colorTimer);
          if (fnEnd) fnEnd();
        };

      }, 30);
    }
    //背景色动画
  function animBackground() {
    var r = 0x4d;
    var g = 0x4d;
    var b = 0xff;

    var tR = 0x24;
    var tG = 0x37;
    var tB = 0x59;

    var dR = (tR - r) / 32;
    var dG = (tG - g) / 32;
    var dB = (tB - b) / 32;

    var oMain = document.getElementById("main");
    var colorTimer = setInterval(function() {
      r += dR;
      g += dG;
      b += dB;

      var bgR = parseInt(r).toString(16);
      var bgG = parseInt(g).toString(16);
      var bgB = parseInt(b).toString(16);

      oMain.style.backgroundColor = '#' + bgR + bgG + bgB; // HEX -> HEXString
      if (r == tR) clearInterval(colorTimer);

    }, 30);
  }


  //运动
  function startMove(obj, json, fnEnd) {
    var timer = null;
    clearInterval(timer);
    var attr;
    var dCur = 0;
    var iSpeed = 0;
    for (attr in json) {
      dCur = json[attr];
      iSpeed = (json[attr] - parseInt(getStyle(obj, attr))) / 18;
    }

    timer = setInterval(function() {

      var bStop = true; //是不是都到了，假设所有的都到了

      for (attr in json) {
        var iCur = 0;

        //取当前位置
        if (attr == 'opacity') {
          iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
        } else {
          iCur = parseInt(getStyle(obj, attr));
        }

        //算速度
        // var iSpeed = (json[attr] - iCur) / 8;

        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

        if (attr == 'opacity') {
          obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
          obj.style.opacity = (iCur + iSpeed) / 100;
        } else {
            if (Math.abs(dCur - iCur) <= Math.abs(iSpeed)) {
              clearInterval(timer);
              obj.style[attr] = dCur + 'px';
              if (fnEnd) {
                fnEnd();
              }
            } else {
              obj.style[attr] = iCur + iSpeed + 'px';
            }

        }

      }

    }, 30);
  }

  function getStyle(obj, attr) {
    if (obj.currentStyle) {
      return obj.currentStyle[attr];
    } else {
      return getComputedStyle(obj, false)[attr];
    }
  }
};